{% extends 'templates/base.html' %}

{% block head %}
    <style>
    .all{
        width: 80%;
        height: 600px;
        background-color: #e9ecef;
        margin-left:10%;
    }
    .author{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .author img{
    border-radius: 50%; /* 设置边框半径为50%，使图片和边框一起变圆 */
    overflow: hidden; /* 防止图片原始尺寸大于容器时溢出 */
    width: 100%; /* 设置图片的宽度（或高度，取决于你想要的效果） */
    height: 100%; /* 设置图片的高度，与宽度相同以形成圆形 */
    object-fit: cover; /* 确保图片覆盖整个容器，同时保持其宽高比（如果需要的话） */
    }
    </style>
{% endblock %}

{% block content %}
    <ul class="all" style="overflow-y: auto">
    {% for essay in writing_list %}

                <div class="essay-card" style="background-color: #f6f6f6;margin-bottom: 20px">
                    <div class="essay-info" style="margin-bottom:20px ">
                        <div class="author"><img src="/{{ essay.head }}"></div>
                        <p style=" margin-left: 110px;margin-top: -50px;margin-bottom: 10px;font-size: 20px;">{{ essay.getName }}</p>
                        <p class="publish-time" style=" margin-left: 80px;font-size: 12px;">{{ essay.datatime }}</p>
                    </div>
                    <p class="essay-content" style="padding: 10px">{{ essay.content }}</p>
                </div>

        {% endfor %}
    </ul>
<form action="/forum/addcontent/" method="post"> <!-- 假设提交到服务器的URL是/submit-comment -->
    {% csrf_token %}
    <textarea id="comment" name="comment" rows="4" cols="50" placeholder="请在这里输入您的评论..." style="width: 1200px;margin-left: 10%"></textarea>
    <button type="submit" style="width: 100px;height: 50px;">提交</button>
</form>
{% endblock %}

{% block script %}
{% endblock %}